<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>reinovoLab</title></reinovo-lab></title>
        <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='img/logo.svg') }}">
        <link rel="stylesheet" media="(min-width: 480px)" href="{{ url_for('static',filename='css/style.css') }}">
        <link rel="stylesheet" media="(max-width: 480px)" href="{{ url_for('static',filename='css/phone/style.css') }}">
        <script src="{{ url_for('static',filename='dist/jquery.min.js') }}"></script>
    </head>
    <body>
        <div id="robot">
            <div class="App">
                <header class="App-header">
                    <div class="App-header-right">
                        <div class="App-logo">
                            <img src='static/img/logo.png' alt="logo">
                        </div>
                    </div>
                    <div class="App-header-right">
                        <div class="App-language">
                            <span class="App-language-img"></span>
                            <span class="text">简体中文</span>
                            <span class="App-lauguage-select"></span>
                            <!-- <div id="myDropdown" class="dropdown-content">
                                <option value="option1">选项1</option>
                                <option value="option2">选项2</option>
                                <option value="option3">选项3</option>
                            </div> -->
                        </div>
                    </div>
                </header>
                <div class="App-control">
                    <div class="home-course">
                        <div class="home-text">
                            <H2>课程学习</H2>
                        </div>
                        <a href="https://reinovo.yuque.com/dcddrf/brxwd1/qlvvgp1v9qhgzfs3?singleDoc# 《oryx使用手册》">
                            <div class="course-card">
                                <img src="./static/img/oryxbot_document.png" alt="Image">
                                <div class="course-card-title">
                                    <h3>oryxbot使用手册</h3>
                                    <p>oryxbot机器人快速入门指南</p>
                                </div>
                            </div>
                        </a>
                        <a href="https://reinovo.yuque.com/dcddrf/brxwd1/yht52xohqc5r7dqf?singleDoc# 《bobac3使用说明书》">
                            <div class="course-card">
                                <img src="./static/img/bobac3_document.png" alt="Image">
                                <div class="course-card-title">
                                    <h3>bobac3使用手册</h3>
                                    <p>bobac3机器人快速入门指南</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="home-app">
                        <div class="home-text">
                            <H2>机器人控制
                            </H2>
                        </div>
                        <div class="home-app-nav">
                            <a href="/slam">
                                <div class="home-card">
                                    <img src="./static/img/slam-logo.png" alt="Image">
                                    <div class="home-card-content">
                                        <h3>机器人地图构建</h3>
                                        <!-- <p>控制机器人扫描地图</p> -->
                                    </div>
                                </div>
                            </a>
                            <a href="/blockly">
                                <div class="home-card">
                                    <img src="./static/img/blockly-logo.png" alt="Image">
                                    <div class="home-card-content">
                                        <h3>Blockly编程</h3>
                                        <!-- <p>这是一个测试</p> -->
                                    </div>
                                </div>
                            </a>
                            <a href="/">
                                <div class="home-card">
                                    <img src="{{ url_for('static', filename='img/python-logo.png') }}" alt="Image">
                                    <div class="home-card-content">
                                        <h3>Python编程</h3>
                                        <!-- <p>这是一个测试</p> -->
                                    </div>
                                </div>
                            </a>
                            <a href="/">
                                <div class="home-card">
                                    <img src="{{ url_for('static', filename='img/future-logo.png') }}" alt="Image">
                                    <div class="home-card-content">
                                        <h3>待完成...</h3>
                                        <!-- <p>这是一个测试</p> -->
                                    </div>
                                </div>
                            </a>

                        </div>
                    </div>

                </div>
            </div>
        </div>
		<div class="loader-wrapper">
			<div class='loader'>
				<div class='article'>
				  <div class='page'></div>
				</div>
			  </div>
        </div>
    </body>
    <script>
        // 监听页面加载完成事件
        window.addEventListener('load', function () {
            $(".loader-wrapper").fadeOut("slow")
        });
    </script>
</html>